<template>
  <a-drawer 
    title="远程终端" 
    :width="600" 
    :open="visible" 
    :body-style="{ paddingBottom: '80px' }" 
    @close="onClose"
    destroyOnClose>
    <iframe
      id="remoteIframe"
      width="100%"
      style="height: 79vh;"
      scrolling="no"
      frameborder="0"
      allowtransparency="true"
      :src="remoteUrl"
    ></iframe>
    <div class="footer">
      <a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
    </div>
  </a-drawer> 
</template>

<script setup>
  import { ref } from 'vue';


  const remoteUrl = ref('');
  const visible = ref(false);
  const remoteIframe = ref(null);

  // 打开抽屉
  function showDrawer(rowData) {
    // remoteUrl.value = 'http://pxd-' + rowData.serialno + '.wssh.axicomin.cn:16609';
    remoteUrl.value = 'http://machine-t00417e680104926.vhost.wanquanai.cn:13080/';
    console.log(remoteIframe.value);
    // document.getElementById('remoteIframe').onload = function() {
    //   var iframeWindow = this.contentWindow;

    //   // 查找并移除 beforeunload 事件监听器
    //   var eventListeners = iframeWindow.getEventListeners(iframeWindow);
    //   if (eventListeners && eventListeners.beforeunload) {
    //     eventListeners.beforeunload.forEach(function(listener) {
    //       iframeWindow.removeEventListener('beforeunload', listener);
    //     });
    //   }
    // };
    visible.value = true;
  }

  // 关闭抽屉
  function onClose() {
    visible.value = false;
    remoteUrl.value = '';
  }

  defineExpose({
    showDrawer,
  });
</script>

<style scoped lang="less">
  .footer {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    border-top: 1px solid #e9e9e9;
    padding: 10px 16px;
    background: #fff;
    text-align: right;
    z-index: 1;
  }
</style>